<template>
  <div v-if="inEdit" class="property-float-input-div">
    <div class="float-input">
      <!-- https://blog.csdn.net/Piqzem/article/details/88908096 -->
      <!-- 限制element-ui表单中input框只能输入数字和小数点 -->
      <el-input-number
        ref="input"
        v-model="data"
        :min="min"
        :max="max"
        :step="step"
        :precision="precision"
        :controls="false"
        controls-position="right"
        size="mini"
        placeholder="*多种*"
        @change="onChange"
        @keyup.enter.native="onEnter"
        @blur="onBlur"
      />
    </div>
    <!-- <div class="point">
      <el-button icon="el-icon-aim" @click.native="onClick" />
    </div>-->
  </div>
  <div v-else class="no-edit-text">{{ label }}</div>
</template>

<script>
import props from '../mixins/props'
// import interact from '@/mixins/interact'

export default {
  name: 'PropertyFloat',
  mixins: [props],
  props: {
    // 最大精度
    precision: {
      type: Number,
      required: false,
      default: 2 // 小数点后2位
    },
    // 最小值
    min: {
      type: Number,
      required: false,
      default: -Infinity
    },
    // 最大值
    max: {
      type: Number,
      required: false,
      default: Infinity
    }
  },
  data() {
    return {
      // 显示值
      data: undefined
    }
  },
  computed: {
    label() {
      return typeof this.data !== 'number' ? '*多种*' : this.data
    },
    // 计算步长
    step: function() {
      return 1 / Math.pow(10, this.precision)
    }
  },
  watch: {
    value(val) {
      this.data = this.getData(val)
    }
  },
  created() {
    this.data = this.getData(this.value)
  },
  methods: {
    getData(val) {
      try {
        if (val !== null && val !== undefined) {
          const _val = parseFloat(val)
          if (isNaN(_val)) {
            return undefined
          } else {
            return this.formatValue(this.ruleValue(_val), this.precision)
          }
        } else {
          return undefined
        }
      } catch (err) {
        return undefined
      }
    },
    // 辅助函数: 格式化数据
    formatValue(data, precision) {
      // https://www.cnblogs.com/Jacklovely/p/6554278.html
      const base = Math.pow(10, precision)
      return Math.round(data * base) / base
    },
    ruleValue(val) {
      if (val < this.min) {
        return this.min
      } else if (val > this.max) {
        return this.max
      } else {
        return val
      }
    },
    // 参见: interact.js/onUpdateCmdResult()函数
    onUpdateCmdResult(result) {
      this.data = this.formatValue(
        this.ruleValue(parseFloat(result)),
        this.precision
      )
      // 向父组件发送change消息(参数需转换为json字符串!!!)
      this.$emit('change', JSON.stringify(this.data))
    },
    onClick() {
      // 参见: interact.js/getDistance()函数
      // this.getDistance()
    },
    onChange(val) {
      this.data = this.getData(val)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', JSON.stringify(this.data))
      }
    },
    onEnter(event) {
      this.data = this.getData(event.target.value)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', JSON.stringify(this.data))
      }
    },
    onBlur(event) {
      // console.log('float.vue 失去焦点')
      if (this.inEdit) {
        // 强行夺回焦点
        this.$refs.input.focus()
      }
    }
  }
}
</script>

<style lang="scss">
%input-number-size {
  width: 20px !important;
  height: 10px !important;
  line-height: 10px !important;
  font-size: 10px !important;
}

.property-float-input-div {
  display: flex;
  flex-direction: row;
  .float-input {
    flex: 6;
    .el-input-number {
      width: 100% !important;
      .el-input__inner {
        text-align: left !important;
      }
    }
  }
  .point {
    flex: 1;
    display: flex;
    align-items: center;
    .el-button {
      flex: 1 !important;
      background-color: transparent !important;
      width: 100% !important;
      font-size: 14px !important;
    }
  }
}
</style>
